<script setup lang="ts" generic="T">
import { isFunction } from 'lodash-es';

import { OperationBtn } from '../type';

const props = defineProps<{
	options: OperationBtn<T>[];
	row: T;
}>();

const emit = defineEmits<{
	(e: 'select', data: { key: string; row: T }): void;
}>();

const firstBtn = computed(() =>
	props.options.find((item) => (item.show === undefined ? true : isFunction(item.show) ? item.show(props.row) : item.show))
);
const dropdownOptions = computed(() =>
	props.options
		.filter((item) => !isFunction(item.show) || item.show(props.row))
		.slice(1)
		.map((item) => ({
			label: item.label,
			key: item.key,
			props: {
				class: item.type
					? {
							error: '!text-red-500',
							warning: '!text-yellow-500',
							info: '!text-blue-500',
						}[item.type]
					: '',
			},
		}))
);

const handleSelect = (key: string) => {
	emit('select', { key, row: props.row });
};
</script>

<template>
	<div class="flex items-center gap-2">
		<n-button v-if="firstBtn" text :type="firstBtn?.type ?? 'primary'" @click="handleSelect(firstBtn?.key)">{{ firstBtn?.label }}</n-button>
		<n-dropdown v-if="dropdownOptions.length > 0" :options="dropdownOptions" @select="handleSelect">
			<i className="icon-[ant-design--ellipsis-outlined] cursor-pointer hover:text-[var(--primary-color)]"></i>
		</n-dropdown>
	</div>
</template>

<style scoped></style>
